<script setup>
//前端开发：先死后活法，前端页面数据都是死的，只有调用了后端的数据才是真正的动网
//导入axios
import axios from 'axios'
//导入ref
import { ref } from 'vue'
import { deptGetAllService } from './api/dept.js'
//定义响应数据
const depts = ref([])
// 因为函数是异步的，所以要使用await，同时函数使用async
const getAllDept = async function () {
  let data = await deptGetAllService()
  depts.value = data
}
//调用函数
getAllDept()
</script>

<template>
  <h2>部门信息列表</h2>
  <table>
    <tr>
      <th>ID</th>
      <th>部门名称</th>
      <th>创建时间</th>
      <th>更新时间</th>
      <th>操作</th>
    </tr>
    <tr v-for="dept in depts">
      <td>{{dept.id}}</td>
      <td>{{dept.name}}</td>
<!--      <td>{{dept.createTime}}</td>-->
<!--      <td>{{dept.updateTime}}</td>-->
      <td>
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
  </table>
</template>

<style scoped>

</style>